<template>
  <LoginHeader>联合登录</LoginHeader>
  <!-- qq账号已绑定小兔鲜账号 -->
  <section v-if="isBind" class="container">
    <div class="unbind">
      <div class="loading"></div>
    </div>
  </section>

  <!-- qq账号没有绑定小兔鲜账号 -->
  <section v-else class="container">
    <nav class="toggle">
      <a :class="{active: hasAccount}"
         @click="hasAccount=true">
        <i class="iconfont icon-bind"></i>已有小兔鲜账号, 请绑定手机</a>
      <a :class="{active: !hasAccount}"
         @click="hasAccount=false">
        <i class="iconfont icon-edit"></i>没有小兔鲜账号, 请完善信息</a>
    </nav>

    <div v-if="hasAccount" class="tab-content">
      <CallbackBind :unionId="unionId"/>
    </div>
    <div v-else class="tab-content">
      <CallbackPatch :unionId="unionId"/>
    </div>
  </section>

  <LoginFooter></LoginFooter>
</template>

<script>
import LoginHeader from '@/components/login/LoginHeader'
import LoginFooter from '@/components/login/LoginFooter'
import { ref } from 'vue'
import CallbackBind from '@/components/login/CallbackBind'
import CallbackPatch from '@/components/login/CallbackPatch'
import QC from 'qc'
import API from '@/api/user'
import qqLogin from '@/components/login/qqLogin'

export default {
  name: 'callback',
  components: {
    LoginFooter,
    LoginHeader,
    CallbackPatch,
    CallbackBind
  },
  setup() {
    // (每个小兔鲜账号有一个unionId字段, 关联的信息就是QQ账号的 openId)
    // 首先: 默认认为已经注册(小兔鲜账号)且已经绑定(手机号)
    // 通过QQ的API获取openId就是后台需要的unionId然后去进行登录
    // 如果成功: 登录成功
    // 如果失败: 该QQ未和小兔鲜进行绑定 (有账号未绑定QQ, 没有账号也没绑定QQ)

    const hasAccount = ref(true)

    // 加载动画状态(最多情况下发出三个请求, 所以要使用加载动画来弥补白屏情况)
    // 之所以没有在登录成功修改状态, 是因为直接进行了路由导航跳转!!! 这个组件直接被销毁了
    const isBind = ref(true)

    const unionId = ref(null)
    // 获取当前登录用户的Access Token 以及OpenId
    // 确保QQ以及登录
    if (QC.Login.check()) {
      QC.Login.getMe((openId, accessToken) => {
        unionId.value = openId
        // openId QQ第三方唯一表示
        // 请求小兔鲜后台, 作QQ登录
        API.userQQLogin(openId)
          .then((res) => {
            // 登录成功: data.result 用户信息

            qqLogin(res, 'QQ登录成功')
          })
          .catch(err => {
            // 登录失败 后端直接把响应码设置400, 所以能在catch中抓取异常 ()
            // console.log(err.response.data)
            isBind.value = false
          })
      })
    }

    return {
      hasAccount,
      isBind,
      unionId
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  margin: 25px auto;
  position: relative;
  min-height: 620px;
  background-color: #fff;

  .unbind {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 25px 0;
    z-index: 99;

    .loading {
      height: 100%;
      background: #fff url("../../assets/images/load.gif") no-repeat center / 100px 100px;
    }
  }

  .toggle {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 40px;

    a {
      height: 44px;
      line-height: 44px;
      padding: 0 45px;
      border-bottom: 2px solid #e4e4e4;

      font-size: 18px;
      color: #999;

      i {
        font-size: 22px;
        vertical-align: middle;
        margin-right: 4px;
      }

      &.active {
        border-bottom-color: @xtxColor;
        color: @xtxColor;
      }
    }
  }
}

::v-deep .login-footer {
  padding-bottom: 30px;
}
</style>
